<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../myCommon.js"></script>
    <style>
        #boll{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius:50%;
            margin-left: 0px;
        }
    </style>
</head>
<body>
<div id="boll"></div>

<script>


    var bollObj = $('boll');    //获取小球对象
    function move() {
        //元素的marginLeft值，已被转换成数字
        var nowMarginLeft = parseInt(window.getComputedStyle(bollObj)['marginLeft']);
        //如果marginLeft 大于 500 则 取消重复执行
        if (nowMarginLeft>=500){
            clearInterval(timer);   //取肖重复执行,这里的 timer是在函数外部定义的，所以在函数内部也是可以使用的
        } else {
            bollObj.style.marginLeft = nowMarginLeft + 1+'px';  //设置当前小球的marginLeft
        }
    }
    //设置函数重复执行，并将 setInterval返回的数字保存起来，用于取消重复时使用。
     var timer = setInterval(move,10);


//    console.log(bollObj);
</script>
</body>
</html>